﻿@using System.Collections;
@inject IProductsProvider ProductService;
@inject IProductCategoriesProvider ProductCategoriesProvider;

<div class="demo-description">
    <h2>
        <DemoNavLink Link="TreeView#MasterDetailDataBinding" />Bind to Master-Detail Data
    </h2>
    <p>The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView#bind-to-data">TreeView</a> for Blazor allows you to load data from several data sources and display the master-detail relationships within the component.</p>
    <p>This demo module binds the TreeView to three data sources and populates component nodes as follows:</p>
    <ul>
        <li>First-level nodes are bound to an array of <i>ProductCategoryMain</i> items via the component's <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTreeView.Data">Data</a> property.</li>
        <li>Second-level nodes are obtained from the second data source. Each node is represented by the <i>ProductCategory</i> object and depends on a parent value (the corresponding first-level node).</li>
        <li>Third-level nodes are obtained from the third data source. Each node is represented by the <i>Product</i> object based on a master-detail relationship between the second and third data sources. This relationship is established through the <i>ProductCategory.SubcategoryID</i> and <i>Product.ProductCategoryId</i> properties.</li>
    </ul>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-body">
        @if(products == null || productSubcategories == null) {
            <p><em>Loading...</em></p>
        }
        else {
            <DxTreeView CssClass="mw-480" Data="@Enum.GetValues(typeof(ProductCategoryMain))"
                        TextExpression="@(dataItem => GetNodeText(dataItem))"
                        ChildrenExpression="@(dataItem => GetNodeChildren(dataItem))">
            </DxTreeView>
        }
    </div>
</div>
<CodeSnippet_TreeView_MasterDetailDataBinding></CodeSnippet_TreeView_MasterDetailDataBinding>

@code {
    IEnumerable<Product> products;
    IEnumerable<ProductCategory> productSubcategories;

    protected override async Task OnInitializedAsync() {
        products = await ProductService.LoadAsync();
        productSubcategories = await ProductCategoriesProvider.GetProductCategoriesAsync();
    }

    IEnumerable GetNodeChildren(object nodeDataObject) {
        if (nodeDataObject is ProductCategoryMain) {
            return productSubcategories
                .Where(c => c.Category.Equals((ProductCategoryMain)nodeDataObject));
        }
        else if (nodeDataObject is ProductCategory) {
            return products
                .Where(p => p.ProductCategoryId == ((ProductCategory)nodeDataObject).SubcategoryID);
        }
        return null;
    }

    string GetNodeText(object dataItem) {
        if (dataItem is ProductCategoryMain) {
            return dataItem.ToString();
        }
        else if (dataItem is ProductCategory) {
            return ((ProductCategory)dataItem).Subcategory;
        }
        else if (dataItem is Product) {
            return ((Product)dataItem).ProductName;
        }
        return "";
    }
}
